<template>
	<view class="cashier">
		<!-- <header-box :title="pageTitle"></header-box> -->
		<view class="cashier-box">
			<view class="cashier-box-title" v-if="pageType != 3"><text>实付金额</text></view>
			<view class="cashier-box-title" v-else><text>转赠手续费</text></view>
			<view class="cashier-box-payMoney" v-if="pageType == 1 || pageType == 3">
				<text>￥</text><text class="_payMoney">{{money}}</text>
			</view>
			<view class="cashier-box-payMoney" v-if="pageType == 2">
				<text>￥</text><text class="_payMoney">{{allMoney}}</text>
			</view>
			<!-- 拍卖类型显示 保证金-->
			<view class="cashier-box-tips" v-if="pageType == 2 && bzj>0">
				<!-- <text>您需要支付10%的拍品价格作为保证金，来参加此次竞拍，竞拍成功完成支付或流拍，保证金会原路返回您的账户</text> -->
				<text>为确保拍卖的正常进行，您的首次出价需要缴纳起拍价10%的保证金，拍卖不成功将退还保证金。若拍卖成功后未在规定时间（24小时）内付款，则该拍品流拍，保证金不予退还。</text>
			</view>
			
			<view class="pay-way-box">
				<view class="pay-way-title"><text>请选择支付方式</text></view>
				<view class="pay-way-item" :class="payWayType == 1?'pay-way-item-active':''" @click="payWayType = 1" v-if="aliPay">
					<view class="pay-way-item-content">
						<view class="pay-way-item-logo"><image class="pay-way-item-logo-img" src="../../static/img/aliPay-icon.png" mode=""></image></view>
						<view class="pay-way-item-title"><text>支付宝</text></view>
					</view>
					<view class="pay-way-item-check">
						<u-icon name="checkbox-mark" color="#ffffff" size="24" v-if="payWayType == 1"></u-icon>
					</view>
				</view>
				<view class="pay-way-item" :class="payWayType == 2?'pay-way-item-active':''" @click="payWayType = 2">
					<view class="pay-way-item-content">
						<view class="pay-way-item-logo"><image class="pay-way-item-logo-img" src="../../static/img/wxPay-icon.png" mode=""></image></view>
						<view class="pay-way-item-title"><text>微信</text></view>
					</view>
					<view class="pay-way-item-check">
						<u-icon name="checkbox-mark" color="#ffffff" size="24" v-if="payWayType == 2"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="pay-btn" @click="toPay">
			<text>确定支付</text>
		</view>
		
		<!-- 弹窗 -->
		<u-popup :show="successShow" :round="20" mode="center" :overlayOpacity="0.8" @close="successPopupClose" @open="successPopupOpen" bgColor="transparent">
			<view class="tipsPopup">
				<view class="tipsPopup-icon">
					<image class="tipsPopup-icon-img" src="../../static/img/success-icon.png" mode=""></image>
					<!-- <image class="tipsPopup-icon-img" src="../../static/img/warn-icon.png" mode=""></image> -->
				</view>
				<!-- <view class="tipsPopup-text"><text>提现成功</text></view> -->
				<view class="tipsPopup-text">
					<!-- <text>您还没有进行实名认证，无法进行提现，请先进行实名认证</text> -->
					<text v-if="pageType == 2">出价{{allMoney}}，出价成功</text>
					<text v-if="pageType == 3">转赠成功</text>
				</view>
				<view class="tipsPopup-confirm" @click="confirmOk"><text>知道啦</text></view>
				<!-- <view class="tipsPopup-confirm" @click="toRealName"><text>实名认证</text></view> -->
				<image class="cancel-icon" @click="successPopupClose" src="../../static/img/cancel-icon.png" mode=""></image>
			</view>
		</u-popup>
		
		<!-- 支付宝支付 -->
		<view class="alipay-form" v-html="aliPayFormContent" style="display: none;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle:'收银台',
				pageType:1, // 1 普通  2 拍卖  3 转增
				payWayType:1, // 1 支付宝 2 微信
				aliPay:false,
				successShow:false,
				bzj:0,
				money:0,  // 拍品的金额
				num:0,  // 购买盲盒时有此字段，如开盲盒时，开的个数
				allMoney:0, // 需要支付的金额（拍品金额+保证金）
				orderNo:'', // 订单编号
				aliPayFormContent:'',
				from:null, // 判断从哪个页面来的，支付成功后跳到来的页面
				auctionId:'', // 拍品ID
				isAuction:true, // 是否是 拍品一口价
			};
		},
		onLoad(option) {
			console.log(option)
			if (option.type) {
				this.pageType = option.type;
				if (this.pageType == 2) {
					if (option.price) {
						this.money = option.price;
						this.allMoney = this.money;
					}
					if (option.bzj) {
						this.bzj = option.bzj;
						this.allMoney = this.bzj;
						this.isAuction = false;
					}
					if (option.auctionId) {
						this.auctionId = option.auctionId;
					}
					if (option.orderNo) {
						this.orderNo = option.orderNo;
					}
					// this.allMoney = Number(this.money)+Number(this.bzj);
				}
				if (this.pageType == 1) {
					this.money = option.price;
					this.num = option.num;
					this.allMoney = this.money;
					this.orderNo = option.orderNo;
				}
				if (this.pageType == 3) {
					this.money = option.price;
					this.orderNo = option.orderNo;
					this.from = option.from;
				}
			}
			if (this.isWeiXinLogin()) {
				this.aliPay = false;
				this.payWayType = 2;
			} else {
				this.aliPay = true;
			}
		},
		methods:{
			successPopupOpen() {
				this.successShow = true;
			},
			successPopupClose() {
				this.successShow = false
				// console.log('close');
				if (this.pageType == 2) {
					uni.redirectTo({
						url:'/pages/myAuction/myAuction'
					})
				}
				if (this.pageType == 3) {
					uni.redirectTo({
						url:'/pages/myCollectionList/myCollectionList'
					})
				}
			},
			confirmOk() {
				this.successShow = false;
				if (this.pageType == 2) {
					uni.redirectTo({
						url:'/pages/myAuction/myAuction'
					})
				}
				if (this.pageType == 3) {
					uni.redirectTo({
						url:'/pages/myCollectionList/myCollectionList'
					})
				}
			},
			// 确定支付
			toPay() {
				let link = '';
				if (Window) {
					link = window.location.origin+''+window.location.pathname+'#/pages'
					// link = 'http://192.168.31.185:8080/whale/#/pages'
				}
				if (this.pageType == 1) {
					// uni.showToast({
					// 	title:'支付成功',
					// 	icon:'success'
					// })
					// 盲盒
					if (this.num>0) {
						if (this.payWayType == 1) {
							this.$api.alipayH5Pre({
								payType:0,
								orderNo:this.orderNo,
								jumpUrlKey:`${link}/myCollectionList/myCollectionList`,
								passbackParam:''
							}).then(res => {
								console.log(res)
								// return false
								if (res.code == 200) {
									this.aliPayFormContent = res.data.alipay;
									if (this.$isiOS) { // 直接跳
										setTimeout(() => {
											document.forms[0].submit();
										},500)
									} else {
										setTimeout(() => {
											document.forms[0].setAttribute('target','_blank'); // 添加属性，跳转新窗口
											setTimeout(() => {
												document.forms[0].submit();
											},500)
										},0)
									}
								}
							})
						}
						// setTimeout(() => {
						// 	uni.redirectTo({
						// 		url:`/pages/openBox/openBox?num=${this.num}`
						// 	})
						// },1500)
					} else {
						// 藏品
						if (this.payWayType == 1) {
							this.$api.alipayH5Pre({
								payType:0,
								orderNo:this.orderNo,
								jumpUrlKey:`${link}/myCollectionList/myCollectionList`,
								passbackParam:''
							}).then(res => {
								console.log(res)
								// return false
								if (res.code == 200) {
									this.aliPayFormContent = res.data.alipay;
									if (this.$isiOS) { // 直接跳
										setTimeout(() => {
											document.forms[0].submit();
										},500)
									} else {
										setTimeout(() => {
											document.forms[0].setAttribute('target','_blank'); // 添加属性，跳转新窗口
											setTimeout(() => {
												document.forms[0].submit();
											},500)
										},0)
									}
								}
							})
						}
					}
				} else {
					if (this.pageType == 2) {
						if (this.payWayType == 1) {
							this.$api.alipayH5Pre({
								payType:0,
								orderNo:this.orderNo,
								jumpUrlKey:this.isAuction?`${link}/myCollectionList/myCollectionList`:`${link}/auctionDetail/auctionDetail`,
								passbackParam:`auctionId=${this.auctionId}`
							}).then(res => {
								console.log(res)
								// return false
								if (res.code == 200) {
									this.aliPayFormContent = res.data.alipay;
									if (this.$isiOS) { // 直接跳
										setTimeout(() => {
											document.forms[0].submit();
										},500)
									} else {
										setTimeout(() => {
											document.forms[0].setAttribute('target','_blank'); // 添加属性，跳转新窗口
											setTimeout(() => {
												document.forms[0].submit();
											},500)
										},0)
									}
								}
							})
						}
					}
					if (this.pageType == 3) {
						if (this.payWayType == 1) {
							this.$api.alipayH5Pre({
								payType:0,
								orderNo:this.orderNo,
								jumpUrlKey:this.from == 1?`${link}/myCollectionList/myCollectionList`:`${link}/myCollectionGive/myCollectionGive`,
								passbackParam:this.from == 1?'':''
							}).then(res => {
								console.log(res)
								// return false
								if (res.code == 200) {
									this.aliPayFormContent = res.data.alipay;
									if (this.$isiOS) { // 直接跳
										setTimeout(() => {
											document.forms[0].submit();
										},500)
									} else {
										setTimeout(() => {
											document.forms[0].setAttribute('target','_blank'); // 添加属性，跳转新窗口
											setTimeout(() => {
												document.forms[0].submit();
											},500)
										},0)
									}
								}
							})
						}
					}
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.cashier{
		width: 100%;
		min-height: 100vh;
		background-color: #16181D;
		font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
		font:caption;
		display: flow-root;
		.cashier-box{
			padding: 0 32rpx;
			box-sizing: border-box;
			.cashier-box-title{
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				margin-top: 110rpx;
			}
			.cashier-box-payMoney{
				font-size: 48rpx;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				margin-top: 4rpx;
				._payMoney{
					font-size: 80rpx;
					font-weight: 500;
					line-height: 112rpx;
				}
			}
			.pay-way-box{
				margin-top: 132rpx;
				width: 100%;
				.pay-way-title{
					font-size: 26rpx;
					font-weight: 600;
					color: #5E6272;
				}
				.pay-way-item{
					height: 144rpx;
					background: #181A20;
					border-radius: 24rpx;
					border: 2rpx solid rgba(255, 255, 255, 0.13);
					margin-top: 16rpx;
					display: flex;
					flex-wrap: nowrap;
					justify-content: space-between;
					align-items: center;
					.pay-way-item-content{
						display: flex;
						flex-wrap: nowrap;
						justify-content: flex-start;
						align-items: center;
						.pay-way-item-logo{
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
							overflow: hidden;
							margin: 0 32rpx;
							.pay-way-item-logo-img{
								width: 100%;
								height: 100%;
							}
						}
						.pay-way-item-title{
							font-size: 32rpx;
							font-weight: 500;
							color: #FFFFFF;
						}
					}
					.pay-way-item-check{
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						border: 2rpx solid rgba(255, 255, 255, 0.4);
						margin-right: 48rpx;
					}
				}
				.pay-way-item-active{
					border:2rpx solid rgba(163, 57, 216, 1);
					.pay-way-item-check{
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						border: none;
						margin-right: 48rpx;
						background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
					}
				}
			}
			.cashier-box-tips{
				padding: 0 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #5D5F7A;
				text-align: center;
				margin-top: 32rpx;
			}
		}
		.pay-btn{
			width: 686rpx;
			height: 88rpx;
			background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
			border-radius: 45rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			margin-bottom: 32rpx;
		}
		.tipsPopup{
			width: 590rpx;
			height: 610rpx;
			background: #262A34;
			border-radius: 40rpx;
			font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
			font:caption;
			position: relative;
			padding: 0 86rpx;
			box-sizing: border-box;
			.tipsPopup-icon{
				width: 168rpx;
				height: 168rpx;
				margin: 68rpx auto 24rpx;
				.tipsPopup-icon-img{
					width: 100%;
					height: 100%;
				}
			}
			.tipsPopup-title{
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
			}
			.tipsPopup-text{
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 56rpx;
				text-align: center;
				margin-top: 44rpx;
			}
			.tipsPopup-confirm{
				width: 406rpx;
				height: 88rpx;
				margin: 68rpx auto 0;
				background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
				border-radius: 45rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #ffffff;
				line-height: 88rpx;
				text-align: center;
			}
			.cancel-icon{
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: 40rpx;
				right: 48rpx;
			}
		}
	}
</style>
